<template>
  <div class="main-center">
    <el-card class="position-detail-card">
      <h2>{{ detail.positionName }}</h2>
      <el-descriptions :column="2" border v-if="detail">
        <el-descriptions-item label="企业名称">{{ detail.enterpriseName }}</el-descriptions-item>
        <el-descriptions-item label="薪资范围">{{ detail.salaryRange }}</el-descriptions-item>
        <el-descriptions-item label="工作地点">{{ detail.workLocation }}</el-descriptions-item>
        <el-descriptions-item label="招聘人数">{{ detail.recruitmentNum }}</el-descriptions-item>
        <el-descriptions-item label="岗位职责" :span="2">{{ detail.responsibility }}</el-descriptions-item>
        <el-descriptions-item label="任职要求" :span="2">{{ detail.requirement }}</el-descriptions-item>
      </el-descriptions>
      <div class="btn-bar">
        <el-button type="primary" @click="showDialog = true" :disabled="hasApplied">{{ hasApplied ? '已投递' : '投递简历' }}</el-button>
      </div>
      <el-dialog v-model="showDialog" title="投递简历" width="400px">
        <el-form :model="applyForm" label-width="80px">
          <el-form-item label="备注">
            <el-input v-model="applyForm.remark" type="textarea" placeholder="可选" />
          </el-form-item>
        </el-form>
        <template #footer>
          <el-button @click="showDialog = false">取消</el-button>
          <el-button type="primary" @click="submitApplication" :loading="loading">确定投递</el-button>
        </template>
      </el-dialog>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
import axios from '@/utils/axios'

const route = useRoute()
const detail = ref({})
const showDialog = ref(false)
const applyForm = ref({ remark: '' })
const loading = ref(false)
const hasApplied = ref(false)

const fetchDetail = async () => {
  try {
    const res = await axios.get(`/position/${route.params.id}`)
    detail.value = res
    // 检查是否已投递（可根据后端返回或后续接口完善）
    // hasApplied.value = res.hasApplied
  } catch (e) {}
}
const submitApplication = async () => {
  loading.value = true
  try {
    await axios.post('/applications/submit', {
      positionId: detail.value.id,
      remark: applyForm.value.remark
    })
    ElMessage.success('投递成功！')
    hasApplied.value = true
    showDialog.value = false
  } catch (e) {}
  loading.value = false
}
onMounted(() => {
  fetchDetail()
})
</script>

<style scoped>
.position-detail-card {
  max-width: 700px;
  margin: 40px auto;
  padding: 30px 20px;
}
.btn-bar {
  margin-top: 24px;
  text-align: right;
}
</style> 